<template>
  <view class="page container">
    <scroll-view scroll-y="true" style="max-height: 80vh;">
    	<u-form
    	  :model="basicForm"
    	  :rules="rules"
    	  labelPosition="top"
    	  ref="form"
    	  labelWidth="auto"
    	  :labelStyle="{
    	  	fontSize: '14px',
    	  	color: '#B2B2B2',
    	  	lineHight: '20px'
    	  }"
    	>
    	  <view class="basic-style">
    	    <u-form-item label="款项名称" prop="kxmc" required>
    	      <u--input placeholder="请输入款项名称" v-model="basicForm.kxmc" />
    	    </u-form-item>
    	    <u-form-item label="金额(元)" prop="je" required>
    	    <!-- <u--input type="number" placeholder="请输入金额" v-number-normal v-model="basicForm.je" @blur="onPlainFormMoneyBlur" /> -->
    				<h-number-input placeholder="请输入金额" v-model="basicForm.je" :digit="2" :min="0" @blur="onPlainFormMoneyBlur"></h-number-input>
    	    </u-form-item>
    			<span v-if="basicForm.collectMoney" style="color: red">
    				<span v-if="htlx == '1'"> 当前款项已收{{basicForm.collectMoney}}元 , 金额调整不可低于实收金额</span>
    				<span v-if="htlx == '2'"> 当前款项已付{{basicForm.collectMoney}}元 , 金额调整不可低于实付金额</span>
    			</span>
    	    <u-form-item label="预计款项日期" prop="kxrq" required>
    	      <h-time-select
    	        mode="date"
    	        ref="remittanceDate"
    	        v-model="basicForm.kxrq"
    	        placeholder="请选择预计款项日期"
    	        border="surround"
    	        suffixIcon="calendar-fill"
    	        :suffixIconStyle="{ color: '#B2B2B2' }"
    	      ></h-time-select>
    	    </u-form-item>
    	    <u-form-item label="款项节点说明" prop="kxjdsm" required>
    	      <u--input placeholder="请输入款项节点说明" v-model="basicForm.kxjdsm" cursorSpacing="100"></u--input>
    	    </u-form-item>
    	  </view>
    	</u-form>
    </scroll-view>
		<view class="space-x-1 mt-1" style="display: flex">
		  <u-button type="primary" text="保存" :loading="loading" @click="onSubmit"></u-button>
		  <u-button type="primary" text="关闭" :loading="loading" @click="onClose"></u-button>
		</view>
  </view>
</template>

<script>
export default {
  name: 'payFormC',
  props: {
    // 表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
    datailDisabled: {
      type: Boolean,
      default: false,
    },
    index: {
      type: Number,
      default: null,
    },
		htlx: {
			type: [Number, String],
			default: null,
		},
		projectId: {
			type: [Number, String],
			default: null,
		}
  },
  data() {
    return {
      loading: false,
			showFormModalC: false,
			formDataC: [], // 任务信息列表
      basicForm: {
        kxmc: '',
        je: '',
        kxrq: '',
        kxjdsm: '',
      },
      rules: {
        kxmc: [{ required: true, message: '请输入款项名称!' }],
        je: [{ required: true, type:'number', pattern: /^-?(([0-9]*(\.[0-9]{1,3})$)|([0-9]+$))/, message: '请输入正确的金额!' }],
        kxrq: [{ required: true, message: '请选择预计款项日期!' }],
        kxjdsm: [{ required: true, message: '请输入款项节点说明!' }],
      },
    }
  },
  created() {},
  methods: {
    reset() {
      this.$refs.form.resetFields()
    },
    async onSubmit() {
      await this.$refs.form.validate()
			if(this.loading) return
			this.loading = true
      if (!this.index) {
        this.$emit('submit', [{
          id: parseInt(Math.random() * 1000000000000),
          ...this.basicForm,
        }, this.index])
      } else {
        this.$emit('submit', [this.basicForm, this.index])
      }
    },
    onClose() {
			this.loading = false
      this.$emit('close')
    },
		
		onPlainFormMoneyBlur () {
			if (this.basicForm.collectMoney) {
				if (this.basicForm.je === '') {
					return false
				}
				if (Number(this.basicForm.je) < Number(this.basicForm.collectMoney)) {
					this.basicForm.je = this.basicForm.collectMoney
				}
			}
		},
  }
}
</script>

<style scoped></style>
